<template>
	<view class="content">
		
		<view class="flexci" style="padding: 20rpx;border-bottom: 1px #ddd solid;">
			<view style="width: 130rpx;text-align: left;margin-right: 30rpx;line-height: 40rpx;color: #797D86;">证件类型</view>
			<view style="flex-grow: 1;padding: 6px 9px;position: relative;" @click="zubieshow = true">
				{{choosezubie.name}}
				<view style="position: absolute; right:0;top: 15rpx;" v-if="!zubieshow"><u-icon name="arrow-down-fill" size="16"></u-icon></view>
			</view>
		</view>
		<view class="flexci" style="padding: 20rpx;border-bottom: 1px #ddd solid;">
			<view style="width: 130rpx;text-align: left;margin-right: 30rpx;line-height: 40rpx;color: #797D86;">姓名</view>
			<view style="flex-grow: 1;">
				<u--input placeholder="请输入内容" border="surround" v-model="all.real_name" @change="change" ></u--input>
			</view>
		</view>
		<view class="flexci" style="padding: 20rpx;border-bottom: 1px #ddd solid;">
			<view style="width: 130rpx;text-align: left;margin-right: 30rpx;line-height: 40rpx;color: #797D86;">证件号码</view>
			<view style="flex-grow: 1;">
				<u--input placeholder="请输入内容" border="surround" v-model="all.id_num" @change="change" ></u--input>
			</view>
		</view>
		<view style="padding: 20rpx;color: #333;margin-top: 30rpx;"><span style="color:#f00;margin-right: 20rpx;">*</span>实名信息不可更改，请准确填写</view>
		<view style="padding: 20rpx 50rpx;color: #333;">实名信息主要用于您已报名的赛事获取</view>
		
		<view style="background: #E62B49;color: #fff;text-align: center;padding: 30rpx; font-size: 30rpx;border-radius: 50rpx;position: fixed;bottom: 30rpx;left: 30rpx;width: 690rpx;" @click="shiming">保存信息</view>
		
		<u-picker :show="zubieshow" :columns="zubielist2" keyName="name" @confirm="zubiechange"
			@cancel="zubieshow=false"></u-picker>
		<u-toast ref="uToast2"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zubieshow:false,
				zubielist2:[
					[
						{name:'身份证',id:0},
						{name:'护照',id:1},
						{name:'其他',id:2},
						{name:'港澳通行证',id:3}
					]
				],
				choosezubie:{name:'身份证',id:0},
				all:{
					id_num:"",
					real_name:""
				}
				
			}
		},
		onLoad() {
			
		},
		
		methods: {
			change:function(){
				
			},
			zubiechange:function(e){
				this.choosezubie = e.value[0]
				this.zubieshow = false
			},
			shiming: function() {
				uni.$u.http.post(this.urlass + '/api/v1/users/realname', {
					token: uni.getStorageSync('token'),
					real_name:this.all.real_name,
					id_num:this.all.id_num,
					id_type:this.choosezubie.id
				}).then(res => {
					if(res.data.code == 200){
						this.$refs.uToast2.show({
							message: "已提交实名认证",
						})
						uni.navigateBack()
					}
					
				})
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.content { background: #F9F9F9; padding: 20rpx; min-height: 100vh;
		/deep/ .uni-input{ line-height: 40rpx;height: 40rpx;}
		/deep/ .u-input__content__field-wrapper__field{line-height: 40rpx;height: 40rpx;}
		/deep/ .uicon-rmb span{ font-size: 25rpx;font-weight: bold;}
		/deep/ .uni-input-placeholder{ font-size: 25rpx;}
		/deep/ .uni-input-input{ font-size: 25rpx;}
		/deep/ .u-input{ border: 0;}
	}
</style>
